<template>
  <div class="DCLayout">
    <div class="left">
      <div class="lefttop">{{ title }}</div>
      <div class="body">
        <template v-for="item in menus">
          <div v-if="item.id != 'divider'" @click="chooseMenu(item)" :class="current == item.id ? 'selected' : ''"
            class="menu">
            {{ item.menuName }}
          </div>
          <div v-else class="divider"></div>
        </template>
      </div>
    </div>
    <div class="right">
      <div class="router-view-content">
        <keep-alive>
          <component :is="currentComponent"></component>
        </keep-alive>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    // 标题
    title: {
      type: String,
      default: "",
    },
    // 菜单
    menuComponents: {
      type: Array,
      default: () => [] /*
            {
                id:'',  // id为divider为分割线
                menuName:'',
                component:组件import
            }
            */,
    },
    defaultId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      current: '',
    };
  },
  computed: {
    menus() {
      return this.menuComponents.map((item) => ({
        id: item.id,
        menuName: item.menuName,
      }));
    },
    currentComponent() {
      let c = this.menuComponents.find((item) => item.id == this.current);
      return c ? c.component : null;
    },
    currentSelected() {
      // this.$route.query.id=this.current

      return this.menuComponents.find((item) => item.id == this.current);
    },
    // current(){
    //   if(this.$route.query.current){
    //     return this.$route.query.current
    //   }else{
    //     return this.defaultId
    //   }
    // }
  },
  methods: {
    chooseMenu(item) {
      if (item.id == "divider") {
        return;
      }
      console.log('chonse')
      let currentMainPath = this.$route.path
      this.$router.replace({ path: currentMainPath, query: { current: item.id } })
    },
  },

  async mounted() {
    if (this.$route.query.current) {
      this.current = this.$route.query.current
    } else if (this.defaultId) {
      this.current = this.defaultId
    }
  },
});
</script>
<style lang="scss" scoped>
.DCLayout {
  width: 100%;
  height: 100%;
  padding: 0;
  display: flex;

  .left {
    width: 130px;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 1px 0 0 0 rgba(232, 232, 232, 0.5);

    .lefttop {
      width: 100%;
      height: 40px;
      border-bottom: 1px solid #efeff0;
      box-sizing: border-box;
      padding-left: 14px;
      font-size: 14px;
      color: #3c4144;
      letter-spacing: -1px;
      font-weight: 500;
      line-height: 39px;
    }
  }

  .right {
    width: 0;
    flex: 1;

    .right_top {
      height: 39px;
      width: 100%;
      box-sizing: border-box;
      background: #ffffff;
      box-shadow: 0 1px 0 0 rgba(232, 232, 232, 0.5);
      border-left: 1px solid #efeff0;
      padding-left: 8px;
      font-size: 14px;
      color: #3c4144;
      letter-spacing: -1px;
      font-weight: 500;
      line-height: 40px;
    }

    .router-view-content {
      overflow: auto;
      height: calc(100% - 40px);
      width: 100%;
      box-sizing: border-box;
      padding: 8px;
      padding-bottom: 0px;
    }
  }
}

.body {
  height: calc(100% - 56px);
  padding: 4px;
  // border: 1px solid $jst-color-neutral-N2;
  border-top: none;
  border-left: none;

  .menu {
    height: 38px;
    line-height: 38px;
    margin-bottom: 4px;
    cursor: pointer;
    padding-left: 8px;
    font-size: 14px;
    opacity: 0.65;
    color: #606266;
    font-weight: 400;

    transition: 0.3s ease-in;

    &:hover {
      color: #323233;
      opacity: 1;
      transition: 0.3s ease-out;
    }

    &.selected {
      transform: 1s ease-in-out;
      background-color: #E6F7FF;
      color: #409eff;
      font-weight: 500;
      opacity: 1;
    }
  }
}

.divider {
  border-top: 1px solid #f2f3f5;
}
</style>
